<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=utf-8");
%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Keywords" content="冬游,冬季旅游,冰雪旅游,冬季,旅游,冰雪"/>
    <meta name="description" content="网页描述">
    <link rel="stylesheet" href="./WinterTourism/material/bootstrap-icons/bootstrap-icons.css" type="text/css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./WinterTourism/material/css/bootstrap.css" type="text/css">
    <!-- jQuery -->
    <script src="./WinterTourism/material/js/jquery-3.4.1.js" type="text/javascript"></script>
    <!-- Bootstrap JS -->
    <script src="./WinterTourism/material/js/bootstrap.bundle.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./WinterTourism/material/css/index.css?v=<%= System.currentTimeMillis()%>" type="text/css">
    <title>冬游网-冬季旅游攻略网站</title>
</head>
<body>
<!-- 导航栏 -->
<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark p-2">
    <a href="#" class="navbar-brand">LOGO</a>
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
            <li class="nav-item"><a href="#" class="nav-link">旅情事记</a></li>
            <li class="nav-item"><a href="#" class="nav-link">新闻资讯</a></li>
        </ul>
        <form action="#" class="d-inline float-right">
            <div class="input-group input-group">
                <input class="form-control" type="text" name="sousuo" placeholder="请输入......"/>
                <div class="input-group-append">
                    <button class="btn btn-dark"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </form>
    </div>
    <div class="d-inline ml-3">
        <c:choose>
            <c:when test="${sessionScope.login.username != null}">
                <ul class="navbar-nav">
                    <li class=" nav-item navbar-text">登录时间:&nbsp;</li>
                    <li class=" nav-item navbar-text mr-3">${sessionScope.nowTime}</li>
                    <li class=" nav-item navbar-text">欢迎您:</li>
                    <li class=" nav-item dropdown">
                        <a class="nav-link  dropdown-toggle" data-toggle="dropdown" href="#">
                                ${sessionScope.login.username}
                        </a>
                        <ul class="dropdown-menu">
                                <%--<li><a href="#" class="dropdown-item-text"></a></li>--%>
                            <li><a href="./WinterTourism/material/template/Adminto/userIndex.jsp" class="dropdown-item">个人中心</a></li>
                            <li><a href="articleByUid?uid=${sessionScope.login.uid}&state=1" class="dropdown-item">文章管理</a></li>
                            <li class="dropdown-divider"></li>
                            <li><a href="logout" class="dropdown-item">退出登录</a></li>
                        </ul>
                    <li class="ml-2">
                        <a href="./WinterTourism/material/writtings.jsp" class="btn btn-danger"><i class="bi bi-send-plus-fill"></i>&nbsp;发布文章</a>
                    </li>
                </ul>

            </c:when>
            <c:otherwise>
                <a href="./WinterTourism/material/login.jsp" class="fenge text-white">登录</a>
                <a href="./WinterTourism/material/register.jsp" class="fenge text-white">注册</a>
            </c:otherwise>
        </c:choose>
    </div>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

<!-- 主题内容 -->
<div class="container">
    <div class="row">
        <c:forEach items="${sessionScope.list}" var="list">
            <div class="col-sm-3 col-6">
                <div class="card border-0">
                    <img src="${list.newsPic}" class="card-img-top img-fluid" style="height: 10rem" />
                    <div class="card-body">
                        <h5 class="card-title text-info tworows">${list.newsTitle}</h5>
                            <a href="articleDetails?newsid=${list.newsId}&links=${list.links}" class="btn btn-outline-secondary float-right">了解更多</a>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="showNewsNav?pageNum=1">首页</a></li>
    <li class="page-item"><a class="page-link" href="showNewsNav?pageNum=${sessionScope.page.pageNumber-1}"><i class="bi-chevron-left"></i></a></li>
    <c:choose>
        <c:when test="${sessionScope.page.totalPage<=5}">
            <c:set var="begin" value="1"></c:set>
            <c:set var="end" value="${sessionScope.page.totalPage}"></c:set>
        </c:when>
        <c:when test="${sessionScope.page.pageNumber<=3}">
            <c:set var="begin" value="1"></c:set>
            <c:set var="end" value="5"></c:set>
        </c:when>
        <c:when test="${page.pageNumber>3}">
            <c:set var="begin" value="${sessionScope.page.pageNumber-2}"></c:set>
            <c:set var="end" value="${sessionScope.page.pageNumber+2}"></c:set>
            <c:if test="${sessionScope.page.pageNumber+2>=sessionScope.page.totalPage}">
                <c:set var="begin" value="${sessionScope.page.totalPage-4}"></c:set>
                <c:set var="end" value="${sessionScope.page.totalPage}"></c:set>
            </c:if>
        </c:when>
    </c:choose>
    <!-- 通过循环显示由begin到end的5个页面，当前页用【】标识 -->
    <c:forEach begin="${begin}" end="${end}" var="index">
        <c:if test="${sessionScope.page.pageNumber==index}">
            <li class="page-item disabled"><a class="page-link" href="showNewsNav?&pageNum=${index}">${index}</a></li>
        </c:if>
        <c:if test="${sessionScope.page.pageNumber!=index}">
            <li class="page-item"><a class="page-link" href="showNewsNav?&pageNum=${index}">${index}</a></li>
        </c:if>
    </c:forEach>
    <li class="page-item"><a class="page-link" href="showNewsNav?pageNum=${sessionScope.page.pageNumber+1}"><i class="bi-chevron-right"></i></a></li>
    <li class="page-item"><a class="page-link" href="showNewsNav?pageNum=${sessionScope.page.totalPage}">尾页</a></li>
    <li class="page-item disabled"><a class="page-link disabled" href="#">共${sessionScope.page.totalPage}页</a></li>
</ul>

</body>
</html>